/* 布局工具类 - HarmonyOS设计指南实现 */

/* Flexbox 布局 */
.d-flex, .flex { display: flex !important; }
.d-inline-flex, .inline-flex { display: inline-flex !important; }
.d-grid, .grid { display: grid !important; }
.d-block, .block { display: block !important; }
.d-inline-block, .inline-block { display: inline-block !important; }
.d-inline, .inline { display: inline !important; }
.d-none, .hidden { display: none !important; }

/* Flex 方向 */
.flex-row { flex-direction: row !important; }
.flex-row-reverse { flex-direction: row-reverse !important; }
.flex-column { flex-direction: column !important; }
.flex-column-reverse { flex-direction: column-reverse !important; }

/* Flex 换行 */
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-wrap-reverse { flex-wrap: wrap-reverse !important; }

/* Flex 主轴对齐 */
.justify-start { justify-content: flex-start !important; }
.justify-end { justify-content: flex-end !important; }
.justify-center { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }
.justify-around { justify-content: space-around !important; }
.justify-evenly { justify-content: space-evenly !important; }

/* Flex 交叉轴对齐 */
.items-start { align-items: flex-start !important; }
.items-end { align-items: flex-end !important; }
.items-center { align-items: center !important; }
.items-baseline { align-items: baseline !important; }
.items-stretch { align-items: stretch !important; }

/* Flex 内容对齐 */
.content-start { align-content: flex-start !important; }
.content-end { align-content: flex-end !important; }
.content-center { align-content: center !important; }
.content-between { align-content: space-between !important; }
.content-around { align-content: space-around !important; }
.content-stretch { align-content: stretch !important; }

/* Flex 子项对齐 */
.self-start { align-self: flex-start !important; }
.self-end { align-self: flex-end !important; }
.self-center { align-self: center !important; }
.self-baseline { align-self: baseline !important; }
.self-stretch { align-self: stretch !important; }

/* Flex 增长 */
.flex-grow-0 { flex-grow: 0 !important; }
.flex-grow-1 { flex-grow: 1 !important; }

/* Flex 收缩 */
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-shrink-1 { flex-shrink: 1 !important; }

/* Flex 基础值 */
.flex-basis-auto { flex-basis: auto !important; }
.flex-basis-0 { flex-basis: 0 !important; }

/* Flex 简写 */
.flex-1 { flex: 1 1 0% !important; }
.flex-auto { flex: 1 1 auto !important; }
.flex-none { flex: none !important; }

/* Grid 对齐 */
.grid-align-start { align-items: start !important; }
.grid-align-center { align-items: center !important; }
.grid-align-end { align-items: end !important; }
.grid-align-stretch { align-items: stretch !important; }

.grid-justify-start { justify-items: start !important; }
.grid-justify-center { justify-items: center !important; }
.grid-justify-end { justify-items: end !important; }
.grid-justify-stretch { justify-items: stretch !important; }

/* 位置 */
.position-static { position: static !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.position-sticky { position: sticky !important; }

/* 顶部 */
.top-0 { top: 0 !important; }
.top-auto { top: auto !important; }

/* 右侧 */
.right-0 { right: 0 !important; }
.right-auto { right: auto !important; }

/* 底部 */
.bottom-0 { bottom: 0 !important; }
.bottom-auto { bottom: auto !important; }

/* 左侧 */
.left-0 { left: 0 !important; }
.left-auto { left: auto !important; }

/* 宽高 */
.w-auto { width: auto !important; }
.w-full, .w-100 { width: 100% !important; }
.w-screen { width: 100vw !important; }

.h-auto { height: auto !important; }
.h-full, .h-100 { height: 100% !important; }
.h-screen { height: 100vh !important; }

/* 最大宽高 */
.max-w-none { max-width: none !important; }
.max-w-full { max-width: 100% !important; }
.max-w-screen { max-width: 100vw !important; }

.max-h-none { max-height: none !important; }
.max-h-full { max-height: 100% !important; }
.max-h-screen { max-height: 100vh !important; }

/* 最小宽高 */
.min-w-0 { min-width: 0 !important; }
.min-w-full { min-width: 100% !important; }

.min-h-0 { min-height: 0 !important; }
.min-h-full { min-height: 100% !important; }
.min-h-screen { min-height: 100vh !important; }

/* 溢出 */
.overflow-auto { overflow: auto !important; }
.overflow-hidden { overflow: hidden !important; }
.overflow-visible { overflow: visible !important; }
.overflow-scroll { overflow: scroll !important; }

.overflow-x-auto { overflow-x: auto !important; }
.overflow-x-hidden { overflow-x: hidden !important; }
.overflow-x-visible { overflow-x: visible !important; }
.overflow-x-scroll { overflow-x: scroll !important; }

.overflow-y-auto { overflow-y: auto !important; }
.overflow-y-hidden { overflow-y: hidden !important; }
.overflow-y-visible { overflow-y: visible !important; }
.overflow-y-scroll { overflow-y: scroll !important; }

/* Z-index */
.z-0 { z-index: 0 !important; }
.z-10 { z-index: 10 !important; }
.z-20 { z-index: 20 !important; }
.z-30 { z-index: 30 !important; }
.z-40 { z-index: 40 !important; }
.z-50 { z-index: 50 !important; }
.z-auto { z-index: auto !important; }

